
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:vega/constant/constant.dart';
import 'package:vega/page/search_view_model.dart';
import 'package:vega/repo/model/search_list_model.dart';
import 'package:vega/route/Routes.dart';
import 'package:vega/utils/common.dart';

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<StatefulWidget> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {

  final SearchViewModel viewModel = SearchViewModel();

  @override
  Widget build(BuildContext context) {
    String _keyword = "";
    return Scaffold(
      body: Column(
        children: [
          TopBar(viewModel: viewModel),
          _SearchPager(viewModel: viewModel)
        ],
      ),
    );
  }
}

class _SearchPager extends StatefulWidget {
  final SearchViewModel viewModel;

  const _SearchPager({super.key, required this.viewModel});

  @override
  State<_SearchPager> createState() => _SearchPagerState();
}

class _SearchPagerState extends State<_SearchPager> {

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: ChangeNotifierProvider(
          create: (context) => widget.viewModel,
          builder: (context, widget) => Consumer<SearchViewModel>(
            builder: (context, value, child) => ListView.builder(
                padding: const EdgeInsets.only(top: 0),
                itemCount: value.searchResList.length,
                itemBuilder: (context, i) => _searchCard(value.searchResList[i])
            )
          )
        )
    );
  }

  Widget _searchCard(final SearchListItem it) {
    return InkWell(
      onTap: () => Navigator.of(context).pushNamed(RoutePath.play),
      child: Column(
        children: [
          const Padding(padding: EdgeInsets.only(top: 5)),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Padding(padding: EdgeInsets.only(left: 5)),
              ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  child: Stack(
                    alignment: AlignmentDirectional.bottomCenter,
                    children: [
                      Image.network(
                        it.cover?? "",
                        fit: BoxFit.cover,
                        width: 180,
                        height: 100,
                      ),
                      Container(
                        width: 180,
                        height: 32,
                        alignment: Alignment.bottomCenter,
                        decoration: const BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                                colors: [
                                  Colors.black54,
                                  Colors.transparent
                                ]
                            )
                        ),
                      )
                    ],
                  )
              ),
              const Padding(padding: EdgeInsets.only(left: 10)),
              SizedBox(
                height: 100,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(it.title?? "", style: const TextStyle(fontSize: 13.0, color: Colors.black)),
                      Text(it.status?? "", style: const TextStyle(fontSize: 13.0, color: Colors.pinkAccent)),
                    ]),
              ),
              const Padding(padding: EdgeInsets.only(right: 5))
            ],
          ),
          const Padding(padding: EdgeInsets.only(top: 5))
        ],
      ),
    );
  }
}

class _SearchHistory extends StatefulWidget {
  const _SearchHistory({super.key});

  @override
  State<_SearchHistory> createState() => _SearchHistoryState();
}

class _SearchHistoryState extends State<_SearchHistory> {
  bool _expanded = false;

  String get _text => _expanded ? "折叠" : "展开";

  Widget get _arrow => _expanded
      ? const Icon(Icons.keyboard_arrow_down)
      : const Icon(Icons.keyboard_arrow_right);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text("搜索记录",
                style: TextStyle(color: Colors.black, fontSize: 13.0)),
            InkWell(
              onTap: () => setState(() {
                _expanded = !_expanded;
              }),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    _text,
                    style: const TextStyle(color: Colors.black, fontSize: 12.0),
                  ),
                  SizedBox(
                    width: 12.0,
                    height: 12.0,
                    child: _arrow,
                  )
                ],
              ),
            )
          ],
        ),
        GridView.builder(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 10,
                crossAxisSpacing: 10,
                childAspectRatio: 5.0
                // childAspectRatio: 0.618,
                ),
            padding: const EdgeInsets.all(10),
            itemCount: 12,
            itemBuilder: (context, i) => InkWell(
                  onTap: () => {},
                  child: Container(
                    height: 32.0,
                    decoration: BoxDecoration(
                        color: Colors.grey[100],
                        shape: BoxShape.rectangle,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(4.0))),
                    alignment: Alignment.center,
                    child: const Text(
                      Constant.text_tips,
                      style: TextStyle(fontSize: 13.0, color: Colors.black),
                    ),
                  ),
                )),
        InkWell(
          onTap: () => {showSnack(context, "清空历史记录")},
          child: const Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: Icon(Icons.cancel_sharp, color: Colors.grey)),
              Text("清空历史记录",
                  style: TextStyle(fontSize: 13.0, color: Colors.grey))
            ],
          ),
        )
      ],
    );
  }
}

class TopBar extends StatefulWidget {
  final SearchViewModel viewModel;
  const TopBar({super.key, required this.viewModel });

  @override
  State<TopBar> createState() => TopBarState();
}

class TopBarState extends State<TopBar> {
  String _keyword = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(padding: MediaQuery.of(context).padding),
        SizedBox(
          height: 66.0,
          child: _searchBar(context),
        )
      ],
    );
  }

  Widget _searchBar(BuildContext context) {
    return Row(
      children: [
        InkWell(
          onTap: () => Navigator.of(context).pop(),
          child: const SizedBox(
            width: 52,
            height: 52,
            child: Icon(Icons.arrow_back_outlined),
          ),
        ),
        Expanded(
            child: Container(
                height: 28.0,
                decoration: const BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Color.fromARGB(0xff, 0xe0, 0xe0, 0xe0),
                    borderRadius: BorderRadius.all(Radius.circular(14.0))),
                alignment: Alignment.center,
                child: TextField(
                    textAlign: TextAlign.start,
                    style: const TextStyle(fontSize: 12.0, color: Colors.black),
                    onChanged: (kw) {
                      _keyword = kw;
                      widget.viewModel.search(kw, 1);
                      showSnack(context, kw);
                    },
                    decoration: const InputDecoration(
                        hintText: "搜索你想看的吧~",
                        border: InputBorder.none,
                        hintStyle: TextStyle(
                          fontSize: 12.0,
                          color: Color.fromARGB(0xff, 0x9e, 0x9e, 0x9e),
                        ),
                        prefixIcon: Icon(Icons.search)
                    )
                )
            )
        ),
      ],
    );
  }
}
